<template>
  <div :id="id" ref="boxwrap" :class="className" :style="{height:height,width:width}" :ctitle="ctitle" :value="value" :color="color" />
</template>

<script>
import resize from '@/components/Charts/mixins/resize'

export default {
  mixins: [resize],
  props: {
    className: {
      type: String,
      default: 'chart'
    },
    id: {
      type: String,
      default: 'chart'
    },
    width: {
      type: String,
      default: '200px'
    },
    height: {
      type: String,
      default: '200px'
    },
    ctitle: {
      type: String,
      default: ''
    },
    value: {
      type: Number,
      default: 0
    },
    color: {
      type: String,
      default: '#58D9F9'
    }
  },
  data() {
    return {
      chart: null,
      fontColor: '#bebebe',
      max: 100
    }
  },
  watch: {
    data: {
      immediate: true,
      handler: function(newval, oldval) {
        this.data = newval
        if (this.chart) {
          this.chart.dispose()
          this.chart = null
          this.initChart()
        }
      },
      deep: true
    }
  },
  mounted() {
    this.domResize()
    this.initChart()
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    initChart() {
      this.chart = this.$echarts.init(document.getElementById(this.id))
      this.chart.setOption({
        series: [
          {
            type: 'gauge',
            startAngle: 180,
            endAngle: 0,
            min: 0,
            max: this.max,
            center: ['50%', '60%'],
            radius: '90%',
            splitNumber: 8,
            itemStyle: {
              color: this.color
            },
            progress: {
              show: true,
              width: 15
            },
            axisLine: {
              lineStyle: {
                width: 15,
                color: [
                  [this.value / this.max, this.color],
                  [this.max, 'rgba(53, 124, 240, 0.5)']
                ]
              }
            },
            pointer: {
              show: false,
              icon: 'path://M12.8,0.7l12,40.1H0.7L12.8,0.7z',
              length: '12%',
              width: 20,
              offsetCenter: [0, '-60%']
            },
            axisTick: {
              show: false,
              length: 12,
              lineStyle: {
                color: 'auto',
                width: 2
              }
            },
            splitLine: {
              show: false,
              length: 20,
              lineStyle: {
                color: 'auto',
                width: 5
              }
            },
            axisLabel: {
              show: false
            },
            title: {
              offsetCenter: ['0', '30%'],
              fontSize: 16,
              color: this.fontColor
            },
            detail: {
              fontSize: 20,
              offsetCenter: [0, '0%'],
              valueAnimation: true,
              color: this.fontColor,
              formatter: '{value}%'
            },
            data: [{
              value: this.value,
              name: this.ctitle
            }]
          }]
      })
    },
    domResize() {
      const that = this
      const dom = this.$refs.boxwrap
      this.$erd.listenTo(dom, function(element) {
        that.chart.resize()
      })
    }
  }
}
</script>
